<!--
 * @Author       : 梁嘉琳
 * @Date         : 2022-05-27 11:11:29
 * @LastEditors  : 梁嘉琳
 * @LastEditTime : 2022-05-27 15:27:06
 * @FilePath     : \aaa\examples\textGeometry.html
-->
<!DOCTYPE html>
<html lang="zh">
	<head>
		<title>threejs学习</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<link rel="icon" href="../favicon.ico" />
		<link type="text/css" rel="stylesheet" href="../public/main.css" />
	</head>
	<body>
		<canvas id="fireflx"></canvas>

		<script type="importmap">
			{
				"imports": {
					"three": "../node_modules/three/build/three.module.js",
					"three/": "../node_modules/three/",
					"public/": "../public/"
				}
			}
		</script>

		<script type="module">
			import * as THREE from 'three';
			import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
			import { resizeRendererToDisplaySize } from 'public/resizeHandle.js';
			import { Lut } from 'three/examples/jsm/math/Lut.js';
			import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
			import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
			import {
				WebGLRenderer,
				PerspectiveCamera,
				LineBasicMaterial,
				BufferGeometry,
				Vector3,
				Line,
				Scene,
				MeshStandardMaterial,
				Mesh,
				AmbientLight,
				SpotLight,
				PCFSoftShadowMap,
			} from 'three';

			const h = window.innerHeight;
			const w = window.innerWidth;
			const k = w / h;
			const canvas = document.querySelector('#fireflx');

			//三、创建文本
			//😀注意顺序!!!!
			//😀创建场景
			const scene = new Scene();

			const loader = new FontLoader();
			loader.load('../module_files/font/helvetiker_regular.typeface.json', function (font) {
				const geometry = new TextGeometry('OptFuture', {
					font,
					size: 80,
					height: 5,
					//曲线·片段
					curveSegments: 12,
					//斜面
					bevelEnabled: true,
					//~厚度
					bevelThickness: 10,
					bevelSize: 3,
					bevelOffset: 0,
					bevelSegments: 5,
				});
				//😀创建材质与几何，创建网格
				const meshMaterial = new MeshStandardMaterial({ color: 0xeeffff });
				const mesh = new Mesh(geometry, meshMaterial);
				mesh.position.set(40, -30, -60);
				mesh.rotation.y = -1.1;
				scene.add(mesh);
			});

			//😀创建灯光
			//创建环境光
			const ambientLight = new AmbientLight(0xffffff, 0.1);
			scene.add(ambientLight);
			//创建聚光灯
			const spotLight = new SpotLight(0xabffdb);
			spotLight.position.set(-40, 60, -10);
			//cast -- 投射
			spotLight.castShadow = true;
			scene.add(spotLight);

			//😀创建相机
			//透视
			//参数含义（fov：field of view:垂直尺度75弧度，aspect：画布朝向:纵横比：默认2，远近剪裁平面）
			const camera = new PerspectiveCamera(35, k, 0.1, 1000);
			camera.position.set(-80, 60, 40);
			camera.lookAt(new Vector3(10, 0, 0));
			scene.add(camera);

			//😀创建渲染器
			//antialias——平滑字体，抗锯齿
			//alpha——阿尔法
			const renderer = new WebGLRenderer({ canvas, antialias: true, alpha: true });
			renderer.setSize(w, h);
			renderer.shadowMap.enabled = true; //显示阴影
			renderer.shadowMap.type = PCFSoftShadowMap;
			renderer.setClearColor(0x3f3f3f, 1); //设置背景颜色

			//😀创建控件对象
			//orbit——轨道，环绕
			const controls = new OrbitControls(camera, renderer.domElement);

			//😀渲染
			function animate() {
				requestAnimationFrame(animate);
				renderer.render(scene, camera);
			}
			animate();
		</script>
	</body>
</html>
